<!DOCTYPE HTML>
<html>

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
	<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
	<title>统战成员学习平台</title>
	<link rel="stylesheet" type="text/css" href="../../css/base.css" />
	<link rel="stylesheet" type="text/css" href="../../css/discovery.css" />
	<link rel="stylesheet" type="text/css" href="../../script/WebUploader/css/webuploader.css" />
</head>

<body>
	<div id='app' style="display:none" v-show="true">
		<div class="publish_moment">
			<textarea v-model="content" placeholder="这一刻的想法...（800字以内）" maxlength="800" id="publish-textarea"></textarea>
			<ul class="imgs">
				<li v-for="(img, i) of imgList"><span @click="delImg(i)" class="close"></span>
					<div @click="photoBrowser(i, imgList)" :style="'background: url('+imageBasePath+img+') no-repeat center'"></div>
				</li>
				<li v-if="imgList.length < 9" class="add">
					<div @click="uploadImg()" style="background: url('../../image/add_image.png') no-repeat center" id="filePicker"></div>
				</li>
			</ul>
		</div>
	</div>
	<script type="text/javascript" src="../../script/api.js"></script>
	<script type="text/javascript" src="../../script/vue.min.js"></script>
	<script type="text/javascript" src="../../script/common.js"></script>
	<script type="text/javascript" src="../../script/jquery-1.8.2.min.js"></script>
	<script type="text/javascript" src="../../script/WebUploader/js/webuploader.min.js"></script>
	<script type="text/javascript" src="../../script/layer_mobile/layer.js"></script>
	<script type="text/javascript">
		var uploader;
		var photoBrowser;
		new Vue({
			el: '#app',
			data: {
				imageBasePath: imageBasePath,
				shareType: 0,
				shareScheduleId: '',
				content: '',
				imgList: [],
				photoBrowserShow: false,
				submiting: false
			},
			mounted: function() {
				var $this = this;
				apiready = function() {
					api.parseTapmode();
					$this.shareType = api.pageParam.shareType;
					$this.shareScheduleId = api.pageParam.shareScheduleId;
					$this.certificateFileUrl = api.pageParam.certificateFileUrl;
					if ($this.shareType == 1 && $this.shareScheduleId) {
						$this.content = api.pageParam.publishMsg;
					}
					if ($this.shareType == 2 && $this.certificateFileUrl) {
						$this.imgList.push($this.certificateFileUrl);
						$this.content = api.pageParam.publishMsg;
					}
					photoBrowser = api.require('photoBrowser');
					api.parseTapmode();
					api.addEventListener({
						name: 'photoBrowser_keyback_event'
					}, function(ret, err) {
						$this.closePhotoBrowser();
					});
					api.addEventListener({
						name: 'publish_moment_event'
					}, function(ret, err) {
						$this.publishMoment()
					});

					setTimeout(function () {
						$this.uploaderInit();
					}, 500);

					api.addEventListener({
						name: 'publish_back'
					}, function () {
						var publishTextarea = $api.byId('publish-textarea');
						publishTextarea.blur();
						closeWin();
					})
				}
			},
			methods: {
				publishMoment: function() {
					var $this = this;
					if ($this.submiting) return;
					if ($this.imgList.length === 0 && $this.content.length === 0) {
						return msgUtil.toast({
							msg: '请输入此刻的想法'
						})
					}

					$this.submiting = true;
					var postParam = {
						content: htmlEncode($this.content),
						imgList: $this.imgList
					}
					if ($this.shareType == 1 && $this.shareScheduleId != '') {
						postParam.shareType = $this.shareType;
						postParam.shareScheduleId = $this.shareScheduleId;
					}
					log('postParam:' + $this.shareType);
					log('postParam:' + $this.shareScheduleId);
					log('postParam:' + postParam.shareType);
					log('postParam:' + postParam.shareScheduleId);
					post('/client/studyMoment/addStudyMoment', postParam, function(ret) {
						if (ret.isSuccess) {
							msgUtil.message(ret.message);
							if ($this.shareType == 1 && $this.shareScheduleId != '') {
								api.sendEvent({
									name: 'scheduleMoment_back_event'
								});
							}
							api.sendEvent({
								name: 'refresh_moments_event'
							});
							setTimeout(function() {
								closeWin()
							}, 1000)
						} else {
							msgUtil.message(ret.message);
							$this.submiting = false;
						}
					})
				},
				uploadImg: function() {
					var $this = this;
					if (api.connectionType == 'unknown' || api.connectionType == 'none') {
						return msgUtil.toast({
							msg: '网络不可用，请检查您的网络'
						});
					}
					api.actionSheet({
						cancelTitle: '取消',
						buttons: ['添加照片', '拍照']
					}, function(ret, err) {
						if (ret) {
							if (ret.buttonIndex === 1) {
								$this.getPicture('library')
							} else if (ret.buttonIndex === 2) {
								$this.getPicture('camera')
							}
						}
					});
				},
				getPicture: function(sourceType) {
					var $this = this;
					api.getPicture({
						sourceType: sourceType,
						encodingType: 'jpg',
						mediaValue: 'pic',
						destinationType: 'url',
						allowEdit: false,
						quality: 100,
						targetWidth: 1000,
						saveToPhotoAlbum: false
					}, function(ret, err) {
						if (!ret || !ret.data) {
							return;
						}
						api.showProgress({
							title: '正在上传...',
							text: ''
						});
						var data = {};
						var userInfo = $api.getStorage(_.USERINFO);
						if (userInfo) {
							data.userId = userInfo.usrId;
							data.time = Date.now();
							data.encodeToken = MD5(data.time + userInfo.mobileToken + userInfo.mobileVerifyKey);
							data.requestType = 'partyconstruction_app';
						}
						api.ajax({
							url: basePath + '/client/studyMoment/uploadImg',
							method: 'post',
							data: {
								values: data,
								files: {
									evaluateImg: ret.data
								}
							}
						}, function(ret, err) {
							api.hideProgress();
							if (ret.code == 200) {
								$this.imgList.push(ret.data.img0)
							} else {
								msgUtil.toast({
									msg: ret.message
								})
							}
						});
					});
				},
				delImg: function(i) {
					var $this = this;
					api.confirm({
						title: '提示',
						msg: '确认要删除该图片吗？',
						buttons: ['确定', '取消']
					}, function(ret, err) {
						if (ret.buttonIndex == 1) {
							$this.imgList.splice(i, 1)
						}
					})
				},
				photoBrowser: function(i, item) {
					var $this = this,
						imgs = [];
					item.forEach(function(item) {
						imgs.push($this.imageBasePath + item)
					})
					$this.photoBrowserShow = true;
					photoBrowser.open({
						images: imgs,
						activeIndex: i,
						bgColor: '#000'
					}, function(ret, err) {
						if (ret.eventType == 'click') {
							photoBrowser.close();
							$this.photoBrowserShow = false;
						}
					});
				},
				closePhotoBrowser: function() {
					var $this = this;
					if ($this.photoBrowserShow) {
						photoBrowser.close();
						$this.photoBrowserShow = false;
					} else {
						closeWin()
					}
				},
				uploaderInit: function () {
					var $this = this;
					var data = {};
					var userInfo = $api.getStorage(_.USERINFO);
					if (userInfo) {
						data.userId = userInfo.usrId;
						data.time = Date.now();
						data.encodeToken = MD5(data.time + userInfo.mobileToken + userInfo.mobileVerifyKey);
						data.requestType = 'partyconstruction_app';
					}

					uploader = WebUploader.create({
						formData: data,
						// 选完文件后，是否自动上传。
						auto: true,

						// swf文件路径
						swf: '../../script/WebUploader/Uploader.swf',

						// 文件接收服务端。
						server: basePath + '/client/studyMoment/uploadImg',

						// 选择文件的按钮。可选。
						// 内部根据当前运行是创建，可能是input元素，也可能是flash.
						pick: '#filePicker',

						// 只允许选择图片文件。
						accept: {
							title: 'Images',
							extensions: 'gif,jpg,jpeg,bmp,png',
							mimeTypes: 'image/*'
						},
						method: 'POST',
						compress: {
							width: 100,
							height: 100,

							// 图片质量，只有type为`image/jpeg`的时候才有效。
							quality: 90,

							// 是否允许放大，如果想要生成小图的时候不失真，此选项应该设置为false.
							allowMagnify: false,

							// 是否允许裁剪。
							crop: false,

							// 是否保留头部meta信息。
							preserveHeaders: true,

							// 如果发现压缩后文件大小比原来还大，则使用原来图片
							// 此属性可能会影响图片自动纠正功能
							noCompressIfLarger: false,

							// 单位字节，如果图片大小小于此值，不会采用压缩。
							compressSize: 1 * 1024 * 1024
						},
						fileSingleSizeLimit: 5 * 1024 * 1024    // 50 M
					});

					// 文件上传成功，给item添加成功class, 用样式标记上传成功。
					uploader.on('uploadSuccess', function (file, ret) {

						if (ret.code == 200) {
							msgUtil.message('上传成功');
							$this.imgList.push(ret.data.img0)
						} else {
							msgUtil.toast({
								msg: ret.message
							})
						}

					});

					// 文件上传失败，显示上传出错。
					uploader.on('uploadError', function (file) {
						msgUtil.message('上传失败');
					});
				}
			}
		});
	</script>
</body>

</html>
